<template>
	<view>
		<map :markers="markers" 
			:scale="scale" 
			:latitude="latitude" 
			:longitude="longitude"
			style="width: 100%; height: calc(100vh - 1rpx);" 
			:enable-satellite="false"
			:enable-3D="true" 
			:show-compass="true"
			:enable-rotate="true"
			:show-location="true"
			@callouttap="callouttap">
		</map>
		<view class="signSpot">
			<view :class="bgNum === i ? 'active' : '' " v-for="(item,i) in signSpotList" :key="i"
				@click="handleCategory(i)">
				{{item}}
			</view>
		</view>
		<view class="description">
			<text>注: 加油分布只展示当月数据</text>
		</view>

		<u-modal v-model="authenticationShow" 
			:show-cancel-button="true" 
			:content="authenticationContent"
			@confirm="authenticationBtn">
		</u-modal>

	</view>
</template>

<script>
	import config from '@/common/config.js'
	export default {
		data() {
			return {
				signSpotList: ['加油分布','套餐分布'],
				active: 0,
				bgNum: 0,
				longitude: config.baseLongitude, 
				latitude: config.baseLatitude, 
				scale: 10,
				markers: [],
				recognizeStatus: '',
				authenticationShow: false,
				authenticationContent: '还未认证，是否现在去认证?',
			}
		},

		onShow() {
			// this.getUserinfo();
			this.getOilRecordList();
			if(this.bgNum === 1){
				this.getSetRecordList();
			}
		},

		methods: {
			getUserinfo() {
				this.$u.api.mine.userinfo({}).then((res) => {
					this.recognizeStatus = res.data.recognizeStatus
				}).catch(e => {}); 
			},
			isRecognizeStatus(url) {
				if (this.recognizeStatus == '0') {
					this.authenticationShow = true
				} else if (this.recognizeStatus == '1') {
					uni.showToast({
						icon: 'none',
						title: '认证审核中',
						duration: 1000
					});
				} else if (this.recognizeStatus == '2') {
					uni.navigateTo({
						url: url
					})
				} else if (this.recognizeStatus == '3') {
					uni.showToast({
						icon: 'none',
						title: '认证审核未通过',
						duration: 1000
					});
				}
			},

			authenticationBtn() {
				uni.navigateTo({
					url: '/pagesA/mine/membershipCertification'
				})
			},

			handleCategory(i) {
				this.longitude= config.baseLongitude
				this.latitude = config.baseLatitude
				this.scale = 10
				this.bgNum = i
				if (i === 0) {
					this.getOilRecordList();
				} else if (i === 1) {
					this.getSetRecordList();
				}
			},

			//加油记录分布
			getOilRecordList() {
				let params = {}
				this.$u.api.record.mapRecordList(params).then((res) => {
					this.markers = res.data.map((item, index) => {
						return {
							id: index+1,
							originId: item.id,
							latitude: item.latitude,
							longitude: item.longitude,
							joinCluster: false,
							clickable: true,
							width: 20, //宽
							height: 20, //高
							iconPath: '/static/position-ct.png',
							callout: {
								content: item.carNumber, //文本
								color: '#ffffff', //文字颜色
								fontSize: 10, //文本大小
								borderRadius: 12, //边框圆角
								padding: '5',
								bgColor: '#337FEE', //背景颜色
								display: 'ALWAYS', //常显
							}
						}
					})
				});
			},

			//套餐分布
			getSetRecordList() {
				let params = {}
				this.$u.api.set.mapSetRecordList(params).then((res) => {
					this.markers = res.data.map((item, index) => {
						return {
							id: index+1,
							originId: item.id,
							latitude: item.latitude,
							longitude: item.longitude,
							joinCluster: false,
							clickable: true,
							width: 20, //宽
							height: 20, //高
							iconPath: '/static/position-ct.png',
							callout: {
								content: item.houseHolder, //文本
								color: '#ffffff', //文字颜色
								fontSize: 10, //文本大小
								borderRadius: 12, //边框圆角
								padding: '5',
								bgColor: (item.op === '电信')?'#337FEE':'#fb3c3f', //背景颜色
								display: 'ALWAYS', //常显
							}
						}
					})
				});
			},

			callouttap(e) {
				const markerId = e.detail.markerId;
				const targetItem = this.markers.find((item) => item.id === markerId);
				if (!targetItem) {
					return false;
				}
				const targetId = targetItem.originId;
				if (this.bgNum === 0) {
					uni.navigateTo({
						url: '/pagesA/oilrecord/oilrecorddetail?id=' + targetId,
					})
				}
				if(this.bgNum === 1){
					uni.navigateTo({
						url: '/pagesA/setrecord/setrecorddetail?id=' + targetId,
					})
				}
			},

		},

	}
</script>

<style scoped lang="scss">
	.signSpot {
		width: 150rpx;
		height: auto;
		background: #fff;
		border-radius: 10rpx;
		text-align: center;
		position: fixed;
		top: 30rpx;
		right: 20rpx;
	}
	.description {
		width: 150rpx;
		height: auto;
		color: #656565;
		font-size: 20rpx;
		text-align: left;
		position: fixed;
		top: 150rpx;
		right: 20rpx;
	}

	.signSpot view {
		height: 25%;
		overflow: hidden;
		padding: 10rpx 0;
		font-size: 26rpx;
		color: #333;
		border-bottom: 1rpx #ddd solid;
	}

	.signSpot .active {
		font-weight: bold;
		color: #1F87C6;
	}

	.signSpot view text {
		margin-top: 10rpx;
		display: block;
		font-size: 60rpx;
	}
</style>
